// 从node包里面导入一个path模块---->需要给当前项目装一些包，例如path包
const path = require('path')

// 使用CommonJS模块规范化导出一个对象
module.exports = {
  entry: './src/main.js', //入口
  // output:'./dist/bundle.js',//出口
  output: { //出口
    // path:'绝对路径,cmd窗口复制过来的路径不方便',
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js' //bundle 包
  },
  module: {
    // rules匹配规则
    rules: [{
        // 正则表达式: .是有特殊含义，例如匹配任意字符  \.做了转义，才能匹配真正的点
        // $表示结尾，^表示开始
        test: /\.css$/i, //匹配到以css文件结尾就会应用下面的loader
        // css-loader只负责将css将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左读。如果从左到右直接报错
        use: ["style-loader", "css-loader"],
      },


      {
        test: /\.less$/i, //匹配.less结尾的文件
        use: [ //下面的三个loader,顺序依旧是从右到左。
          //也可以向css直接放数组，数组里面放字符串，写成对象可以加属性。
          //下面的loader从下执行到上，即从右执行到左
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
            // options: {
            //   lessOptions: {
            //     strictMath: true,
            //   },
            // },
          },
        ],
      },
      {
        // 早期的DOS操作系统，后面有Windows操作系统
        // DOS操作系统后缀名只存在三位:jpg、htm、txt、yml、doc
        // windows操作系统和Linux操作系统支持:jpeg、html、text、yaml、docx--->网上很多
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            // limit单位为字节byte，小于limit的图片才会转化为base64图片，加载效率更高
            limit: 50000
          }
        }] 
      }
    ],
  },

}